import React, { useState, useEffect } from 'react';
import { Modal, Button, Skeleton, Image, message, Upload, Row, Col, Form } from 'antd'
import { UploadOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { ProFormText, ProForm, ProFormDatePicker, ProFormDateTimePicker, ProFormSelect, ProFormTextArea, ProFormUploadButton } from '@ant-design/pro-components';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import { information } from '@/utils/rules';
import Utils from 'fr-util/utils';
import CheckListButton from '@/components/CheckListButton'

import {
  reqPulseCalibrationList,
  reqTongueCalibrationList,
  reqDiagnosisTermList,
  reqDiagnosisTermListByGrade,
  reqSeniorInquiryList,
  reqSeniorInquiryUpdate,
  reqSymptomList,
  reqSymptomListByGrade
} from '@/services/firstConsultation';

import { reqAddActPrize, reqUpdateActPrize } from '@/services/basicConsultation';

const EditModal: React.FC = ({
  row,
  isOpen,
  handleModal,
}) => {
  const title = '脉诊标定'
  const [formObj] = ProForm.useForm()
  const [initialValues, setinitialValues] = useState<any>(null)
  // const handleAdd = async (params: any) => {
  //   const res = await reqAddActPrize({ ...params })
  //   if (res.code == 200) {
  //     message.success(res?.message)
  //     actionRef?.current.reload()
  //     handleModal(false)
  //   } else {
  //     message.error(res?.message)
  //   }
  // }

  const handleEditor = async (params: any) => {
    console.log('handleEditor :>> ', params);
    handleModal(params)
    // const res = await reqUpdateActPrize({ ...params, id: row?.id })
    // if (res.code == 200) {
    //   message.success(res?.message)
    //   actionRef?.current.reload()
    //   handleModal(false)
    // } else {
    //   message.error(res?.message)
    // }
  }

  const [leftleftOptions, seLeftOptions] = useState<any>();
  const [rightOptions, setRightOptions] = useState<any>();



  async function init(
    query: {
      tyPatientId: string,
      tyMedicalCaseId?: string
    }
  ) {

    if (row?.seniorInquiry?.tyPulseCalibrationName) {
      console.log('JSON.parse(row?.seniorInquiry?.tyPulseCalibrationName :>> ', JSON.parse(row?.seniorInquiry?.tyPulseCalibrationName))
      setinitialValues(JSON.parse(row?.seniorInquiry?.tyPulseCalibrationName))
    }

    try {
      const res = await reqPulseCalibrationList({
        pageNum: 1,
        pageSize: 10,
        ...query
      })

      if (res?.resultCode == '00000000') {
        let lOptions = [];
        let rOptions = [];
        res?.data?.result?.map((item) => {
          if (item.type == '1') {
            lOptions.push({
              label: item?.name,
              value: item?.name
            })
          } else {
            rOptions.push({
              label: item?.name,
              value: item?.name
            })
          }
        })

        seLeftOptions(lOptions);
        setRightOptions(rOptions);
        setinitialValues({})
        if (row?.seniorInquiry?.tyPulseCalibrationName) {
          setinitialValues(JSON.parse(row?.seniorInquiry?.tyPulseCalibrationName))
        }
      } else {
        message.error(`获取脉诊标定列表信息出错！${res?.message}`)
      }
    } catch (error: any) {
      message.error('获取脉诊标定列表信息出错！', error)
      console.log('获取脉诊标定列表信息出错！ :>> ', error);
    }
  }

  useEffect(() => {
    init()
  }, [])

  const valueChanage = (value: any) => {
    console.log('valueChanage :>> ', value);
  }

  console.log('row :>> ', row, typeof initialValues);


  return (
    <Modal
      width={850}
      title={title}
      open={isOpen}
      onCancel={() => handleModal()}
      footer={null}
      destroyOnClose={true}
    >
      {
        initialValues === null &&
          row?.seniorInquiry?.tyPulseCalibrationName &&
          leftleftOptions &&
          rightOptions
          ? <Skeleton active paragraph={{ rows: 6 }} /> :
          <Form
            form={formObj}
            initialValues={initialValues}
            onValuesChange={valueChanage}
            onFinish={(values): Promise<any> => handleEditor(values)}>
            <Row gutter={[24, 12]}>
              <Col span={12}>
                <Form.Item name="left" label="左手" rules={[{ required: true }]}>
                  <CheckListButton options={leftleftOptions} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name="right" label="右手" rules={[{ required: true }]}>
                  <CheckListButton options={leftleftOptions} />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Button type="primary" htmlType="submit">确定</Button>
              </Col>
            </Row>
          </Form>
      }
    </Modal >
  );
};
export { EditModal }

